<template>
	<view class="sh-grid-box mb10">
		<view class="tool-item y-f" v-for="(menu, index) in detail.list" :key="index" @tap="jump(menu)">
			<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
			<text class="item-title">{{ menu.name }}</text>
		</view>
		<shopro-modal v-model="show" style="z-index: 88;" cathctouchmove>
			<block slot="modalContent">
				<view class="cu-dialog">
					<view class="modal-box">
						<image class="head-bg" :src="'http://shopro.7wpp.com' + '/imgs/nologin_bg.png'" mode=""></image>
						<view class="detail">
							<view class="title1">您还未绑定手机号</view>
							<view class="title2">绑定即刻开启品质生活</view>
						</view>
						<view class="btn-box y-f"><button class="cu-btn login-btn" @tap="onLogin1">立即绑定</button></view>
					</view>
				</view>
			</block>
		</shopro-modal>
	</view>
</template>

<script>
/**
 * 自定义之宫格列表
 * @property {Object} detail  - 宫格信息
 */
export default {
	components: {},
	data() {
		return {
			routerTo: this.$tools.routerTo,
			show: false,
		};
	},
	computed: {},
	props: {
		detail: {
			type: Object,
			default: null,
		},
	},
	methods: {
		onLogin1() {
			uni.navigateTo({
				url: '/pages/user/edit-phone',
			});
		},
		jump(data) {
			let mobile = uni.getStorageSync('userInfo').mobile;
			if (!mobile) {
			}
			console.log('data :>> ', data);
			if (data.name == '邀请好友' && !mobile) {
				this.show = true;
			} else {
				if(data.name == '邀请好友'){
					this.$api('panduan', {
						share_id : uni.getStorageSync('userInfo').id
					}).then(res => {
						if (res.code==1) {
							this.$tools.routerTo(data.path);
						}else{
							this.$tools.toast('您尚未满足分享条件');
						}
					});
					return
				}

				this.$tools.routerTo(data.path);
			}
		},
	},
};
</script>

<style lang="scss">
// 宫格
.modal-box {
	width: 100%;
	border-radius: 20rpx;
	background: #fff;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-bottom: 30rpx;

	.head-bg {
		width: 100%;
		height: 210rpx;
	}

	.detail {
		.title1 {
			color: #46351b;
			font-size: 35rpx;
			font-weight: bold;
		}

		.title2 {
			font-size: 28rpx;
			color: #999;
			padding-top: 20rpx;
		}
	}

	.btn-box {
		margin-top: 80rpx;

		.login-btn {
			width: 492rpx;
			height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
		}

		.close-btn {
			width: 492rpx;
			height: 70rpx;
			color: #e9b766;
			font-size: 26rpx;
			margin-top: 20rpx;
			background: none;
		}
	}
}
.sh-grid-box {
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 40rpx;

	.tool-item {
		width: (750rpx/4);
		padding-top: 40rpx;

		.tool-img {
			width: 44rpx;
			height: 44rpx;
			// background: #ccc;
		}

		.item-title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 24rpx;
			padding-top: 30rpx;
		}
	}
}
</style>
